<!-- 我的发布 -->
<template>
  <div class="house-list">
    <div class="header">
      <div class="left">
        <el-button type="text" icon="el-icon-arrow-left" style="color: #F4A780; font-size: 16px" @click="goBack">
          <span>我的发布</span>
        </el-button>
      </div>
      <div class="right">
        <el-button type="text" icon="el-icon-more"></el-button>
        <el-button type="text" icon="el-icon-s-help"></el-button>
      </div>
    </div>
    <div v-infinite-scroll="load"
         :infinite-scroll-disabled="noMore" style="overflow: auto;">
      <div v-for="item in AnnounceList">
        <div class="house-item" v-if="item.imagesUrl && item.imagesUrl.length > 0">
          <div class="house-header">
            <span class="house-title">{{ item.title }}</span>
            <span class="house-price">￥{{ item.rent }}/月</span>
          </div>
          <div class="publish-date">{{ item.location }}</div>
          <div class="house-images">
            <img :src="item.imagesUrl[0]" alt="" class="image">
            <img :src="item.imagesUrl[1]" alt="" class="image">
          </div>
          <div class="house-info">
            <img :src="user.photo" style="width: 35px; height: 35px; border-radius: 50%">
            <span class="house-time">发布于{{ item.createTime }}</span>
            <span class="view-count"><el-button icon="el-icon-view"></el-button> {{ item.viewCount }}次浏览</span>
          </div>
          <div class="house-actions">
            <el-button type="text" @click="offShelf(item)">下架</el-button>
          </div>
        </div>
        <div v-else class="house-demand-card">
          <div class="header">
            <img :src="user.photo" style="width: 40px; height: 40px; border-radius: 50%">
            <div class="user-info">
              <p style="font-size: 15px; color: #F4A780; text-align: left">{{ user.nickName }}</p>
              <p style="font-size: 12px; color: gray">{{ item.createTime }}</p>
            </div>
            <p class="location" style="color: #F4A780; font-size: 14px;">{{ item.location }}</p>
          </div>
          <div class="content">
            <p class="renterRequire">{{ item.renterRequire }}</p>
          </div>
          <div class="di">
            <el-button type="text" @click="handleDelete(item)">删除</el-button>
            <el-button type="text" @click="handleEdit(item)">编辑</el-button>
          </div>
        </div>
      </div>
    </div>




    <div class="confirm-off-shelf" v-if="showOffShelfConfirm">
      <div class="confirm-message">是否确定下架该信息？</div>
      <div class="button-group">
        <el-button type="text" @click="cancelOffShelf">取消</el-button>
        <el-button type="text" @click="confirmOffShelf">确定</el-button>
      </div>
    </div>

    <el-dialog title="修改" :visible.sync="dialogFormVisible" :before-close="closeDialog">
      <el-form :model="obj">
        <el-form-item label="租客的要求:">
          <el-input v-model="obj.renterRequire" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="update(obj)">确 定</el-button>
      </div>
    </el-dialog>

    <div class="confirm-off-shelf" v-if="dialogVisible">
      <div class="confirm-message">是否确定删除该信息？</div>
      <div class="button-group">
        <el-button type="text" @click="qu">取消</el-button>
        <el-button type="text" @click="del">确定</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      dialogFormVisible: false,
      user: {},
      obj: {},
      AnnounceList: [],
      showOffShelfConfirm: false,
      images: [],
      questForm: {
        page: 1,
        size: 10,
        state: 1
      },
      page: 1,
      size: 10,
      total: 0,
      id : '',
      xj : {},
    }
  },
  computed: {
    noMore() {
      return  this.AnnounceList.length >= this.total
    }
  },
  methods: {
    closeDialog() {
    // 这里可以添加关闭对话框前的逻辑
    return true; // 允许关闭对话框
  },
    qu(){
      this.dialogVisible = false;
    },
    del(){
      this.axios.get(`http://localhost:9701/web/required/deleteRequiredHouse/${this.id}`).then(res => {
        if (res.data.code === 200) {
          this.$message.success(res.data.message);
          this.dialogFormVisible = false;
          this.getMyRelease();
          this.id = '';
        } else {
          this.$message.error(res.data.message);
        }
      })
    },
    handleDelete(item){
      this.id = item.id;
      this.dialogVisible = true;

    },
    update(obj){
      this.axios.post('http://localhost:9701/web/required/updateRequiredHouse',obj).then(res => {
        if (res.data.code === 200) {
          this.$message.success(res.data.message);
          this.dialogFormVisible = false;
          this.getMyRelease();
          this.obj = {};
        } else {
          this.$message.error(res.data.message);
        }
      })
    },
    handleEdit(item){
      console.log(item);
      this.obj = {
        id: item.id,
        renterRequire: item.renterRequire,
      }
      this.dialogFormVisible = true;
    },
    load() {
      this.page++;
      setTimeout(() => {
        if (this.noMore) {
          this.page--;
          return;
        }
        this.questForm = {
          page: this.page,
          size: this.size,
          state: this.showHiddenInfo? 1 : 0
        };
        this.axios.post('http://localhost:9701/web/userInfo/getMyRelease', this.questForm)
         .then((res) => {
            console.log('load 接口响应数据:', res);
            if (res.data && res.data.code === 200 && res.data.data) {
              this.total = res.data.data.total;
              const records = res.data.data.records;
              if (Array.isArray(records)) {
                records.forEach((item) => {
                  try {
                    console.log('处理前数据:', item);
                    if (typeof item ==='string') {
                      // 使用 reviver 函数确保 id 以字符串形式解析
                      item = JSON.parse(item, (key, value) => {
                        if (key === 'id') {
                          return String(value);
                        }
                        return value;
                      });
                    }
                    if (item.imagesUrl && typeof item.imagesUrl ==='string') {
                      item.imagesUrl = item.imagesUrl.split(",");
                    }
                    console.log('处理后数据:', item); // 记录处理后数据
                    this.AnnounceList.push(item);

                  } catch (error) {
                    console.error('load 数据解析错误:', error, '原始数据:', item); // 详细记录错误和原始数据
                  }
                });
              }
            } else {
              this.$message.error(res.data.message || 'load 加载更多数据失败，请检查接口');
            }
          })
         .catch((error) => {
            console.error('load 加载更多数据请求出错:', error);
            this.$message.error('load 加载更多数据失败，请稍后重试');
          });
      }, 3000);
    },

    goBack(){
      this.$router.go(-1)
    },
    offShelf(item) {
      this.xj = item;
      this.showOffShelfConfirm = true
    },
    cancelOffShelf() {
      this.showOffShelfConfirm = false
    },
    confirmOffShelf() {
      // 这里可以实现下架的逻辑
      let url = "http://localhost:9701/web/"
      if (this.xj.updateTime === undefined) {
        url = url + "house/downHouse/" + this.xj.id
      } else {
        url = url + "rental-hourse/changeStatus/" + this.xj.id
      }
      this.axios.get(url).then(res => {
        if (res.data.code === 200) {
          this.$message.success("下架成功");
          this.showOffShelfConfirm = false;
          this.getMyRelease();
        } else {
          this.$message.error(res.data.message);
        }
      })
    },
    getMyRelease() {
  this.axios.post('http://localhost:9701/web/userInfo/getMyRelease', this.questForm)
    .then((res) => {
      console.log('getMyRelease 接口响应数据:', res);
      this.AnnounceList = [];
      if (res.data && res.data.code === 200 && res.data.data) {
        this.total = res.data.data.total;
        const records = res.data.data.records;
        if (Array.isArray(records)) {
          records.forEach((item) => {
            try {
              console.log('处理前数据:', item);
              if (typeof item ==='string') {
                // 使用 reviver 函数确保 id 以字符串形式解析
                item = JSON.parse(item, (key, value) => {
                  if (key === 'id') {
                    return String(value);
                  }
                  return value;
                });
              }
              if (item.imagesUrl && typeof item.imagesUrl ==='string') {
                item.imagesUrl = item.imagesUrl.split(",");
              }
              console.log('处理后数据:', item);
              this.AnnounceList.push(item);
            } catch (error) {
              console.error('getMyRelease 数据解析错误:', error, '原始数据:', item);
            }
          });
        }
      } else {
        this.$message.error(res.data.message || 'getMyRelease 获取发布信息失败，请检查接口');
      }
    })
    .catch((error) => {
      console.error('getMyRelease 获取发布信息请求出错:', error);
      this.$message.error('getMyRelease 获取发布信息失败，请稍后重试');
    });
},
    getUserInfo(){
      this.axios.get('http://localhost:9701/web/userInfo/getUserInfo').then(res => {
        this.user = res.data.data;
      })
    }
  },
  created() {
    this.getUserInfo();
    this.getMyRelease();

  }
}
</script>

<style scoped>
.dialog-footer{
  text-align: center;
}

.house-demand-card{
  border: 1px solid #eaeaea;
  border-radius: 5px;
}
.di{
  height: 50px;
  line-height: 50px;
  border-top: 1px solid gainsboro;
  margin-top: 50px;
}

.di button{
  border: 1px solid gainsboro;
  color: gainsboro;
  width: 80px;
  height: 40px;
  float: right;
  margin-right: 10px;
  margin-top: 5px;
}
.renterRequire{
  text-align: left;
  margin-left: 10px;
}

.house-time {
  color: #939393;
}

.publish-date {
  text-align: left;
  font-size: 15px;
  margin-left: 5px;
}

.view-count button{
  border: none;
  background-color: transparent;
  color: #F4A780;
  width: 10px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
}


.right {
  display: flex;
  border: 1px solid #F4A780;
  padding: 5px 5px;
  border-radius: 15px;
  margin-right: 20px;
}

.right button {
  color: #F4A780;
  padding: 0 5px;
  font-size: 18px;
}
.house-list {
  width: 390px;
  margin: 0 auto;
}
.house-item {
  border: 1px solid #eee;
  border-radius: 5px;
  padding: 10px;
  margin-bottom: 20px;
  margin-top: 10px;
}
.house-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.house-title {
  font-size: 16px;
  font-weight: bold;
  color: gray;
}
.house-price {
  color: red;
}
.house-images {
  position: relative;
  display: flex;
}
.house-images img {
  width: 110px;
  height: 100px;
  margin-right: 10px;
}
.house-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  height: 40px;
  font-size: 13px;
}
.house-actions {
  border-top: 1px solid gainsboro;
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
  padding-top: 10px;
}
.house-actions button{
  width: 80px;
  height: 40px;
  border: 1px solid gainsboro;
  color: gainsboro;
}
.confirm-off-shelf {
  border: 1px solid #eee;
  border-radius: 5px;
  padding: 10px;
  margin-top: 20px;
}
.confirm-message {
  text-align: center;
  margin-bottom: 10px;
}
.button-group {
  display: flex;
  justify-content: center;
}
.button-group button {
  margin: 0 10px;
}
</style>